<template>
	<view>
    <uv-navbar title="" bg-color="#fff" :placeholder="true" titleStyle="font-size:0">
        	<template v-slot:left>
        				<view class="title">  嗨8智慧球客	</view>
        	</template>
    </uv-navbar>
       <view class="search">
           <view class="justify-between headerSearch align-center">
              <view class="city align-center" @click="openArea">
                  {{areaName}} <uv-icon name="arrow-down-fill" size="8" color="rgba(68, 68, 68, 1)"></uv-icon>
              </view>
              <text class="mlr10 line"></text>
               <input type="text" v-model="keyword" class="flex1" placeholder="请输入关键词搜索" />
               <uv-icon color="#000" size="28" @click="search()" name="search"></uv-icon>
           </view>
       </view>
		<view class="bgWhite mb18" style="height:314rpx;">
			<swiper class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots" style="text-align:center;height:340rpx;" 
				:autoplay="autoplay" :interval="interval" :duration="duration">
                <!-- -->
				<swiper-item  v-for="(i,n) in slideList" :key="n"  @click="toUrl(i.url)">
					<image :src="i.image" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content bg100 plr15 pb50">
             <view class="grid justify-between mb20">
                 <view class="gridItem flex-col" @click="toUrl('/pages/reservation/index')">
                        <image src="/static/images/index/nav1.png" mode="widthFix"></image>
                        同城约球
                 </view>
                 <view class="gridItem flex-col" @click="toUrl('/pages/tabbar/chat','tab')">
                        <image src="/static/images/index/nav2.png" mode="widthFix"></image>
                        附近门店
                 </view>
                 <view class="gridItem flex-col" @click="toUrl('/pages/equipmentList/index')">
                        <image src="/static/images/index/nac3.png" mode="widthFix"></image>
                        器材专卖
                 </view>
                 <view class="gridItem flex-col" @click="toUrl('/pages/arena/index')">
                        <image src="/static/images/index/nav4.png" mode="widthFix"></image>
                        打擂台
                 </view>
                 
             </view>   
			<!-- <uv-notice-bar direction="column" bgColor="#fff" :text="text"></uv-notice-bar> -->
            <uv-tabs :list="list" :activeStyle="{
			color: '#333',
			fontWeight: 'bold',
			transform: 'scale(1.05)'
    	}"	lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`" @click="click"></uv-tabs>
    
			
			<view class=" justify-between flex-wrap ">
                        <view class="peopleInfo" v-for="(item,index) in gyList "
                            :key="index" @click="toMain(item)">
                            <image style="width: 340rpx;height: 370rpx;border-radius: 15rpx ;" :src="item.image" mode=""></image>
                        <view class=" peopleTag ">
                                <view class="taginfo">
                                    <image src="/static/images/index/i2.png" mode="widthFix" style="width: 20rpx;margin-right: 4rpx;"></image>
                                    {{babyTag}}
                                </view>
                                <view class="tagStatus">
                                    <text class="point"></text>
                                    {{item.status==1?"工作中":'空闲' }}
                                </view>
                        </view>
                        <view class="peoplename justify-between">
                                {{item.name}}  <view class="align-center">{{item.eval}} <uv-icon size="14"  color="#fff" name="star-fill"></uv-icon> </view>
                        </view>
                            
                        </view>
                	
				<view class="" v-if="gyList.length==0">
				    <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
				</view>
			</view>
		
		<view class="moduleTitle justify-between  "  >同城约球  </view>
		<view class="">
			<view class="orderItem bgWhite ptb5 plr5 mb12  justify-start radius10 " v-for="(item,index) in orderList "
				:key="index" >
                <view class="userName">{{item.user_name}}</view>
				<image :src="item.user_avatar" mode=""></image>
				<view class="flex-col orderright justify-between ">
					<text class="orderName clamp ">{{item.shop_name}}</text>
                    <view class="justify-start align-center">
                        <text>类型：{{item.label_title}}</text>
                        <text class="ml10">  段位：{{item.level}}档</text>
                    </view>
					<view class="">
						时间：{{item.yuyue_time||""}}
					</view>
                    <view class="justify-between align-center">
                        <view class="remark clamp" style="width: 300rpx;">
                            备注：{{item.beizhu||""}}
                        </view>
                            <view v-if="item.status==1" @click="Apply(item)" class="apply"> 应约 </view>
                            <view v-else @click="Apply(item)" class="apply" style="background: #464646;"> {{item.status==2?'已应约':'已取消'}} </view>
                    </view>
				</view>
			</view>
			<view class="" v-if="orderList.length==0">
			    <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
			</view>
		</view>
	</view>	
    <uv-popup ref="popup" bgColor="none" mode="center">
        <view class="flex-col align-center">
            <view class="bgWhite popcontent flex-col justify-between plr15" style="height: 558rpx;">
                <view class="pt15  ">
                    <view class="mb20 popTitle justify-center">
                        同城应约
                    </view>
                </view>
    			<view @click="showLevelPicker" class="mb5" style="padding-left: 20rpx; height:82rpx;line-height:82rpx;font-size: 30rpx;color: #A7A7A7; background: #F5F5F5;border-radius:8rpx">
    				{{level?level:'请选择段位'}}
    			</view>
    			<uv-textarea v-model="beizhu"  height="70" customStyle="border:none;flex:none; height:170rpx; background: #F5F5F5;border-radius:8rpx" count placeholder="请输入内容"></uv-textarea>
                
               <view class="save_btn" @click="save">
               	确定应约
               </view>
            </view>
            <uv-icon @click="close" color="#fff" size="35" name="close-circle"> </uv-icon>
        </view>
    </uv-popup>
	<uv-picker ref="areaPicker" :columns="areaRrand" keyName="name" @change="carChange"
		@confirm="areaConfirm"></uv-picker>
        <uv-picker ref="levelPicker" keyName="name" :columns="[levelList]" @confirm="levelConfirm"></uv-picker>
		<uv-picker ref="picker" keyName="name" :columns="[areaList]" @confirm="confirm"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                list:[
                     {
                    					name: '台球宝贝',
                                        value:1 
                    				}, {
                    					name: '助理教练',
                                        value:0
                    				},
                ],
				imgList: [],
				headerList: [],
				car_brand: [
					[],
					[]
				],
				areaRrand: [
					[],
					[]
				],
				areatype: 0,
				text: [],
				orderList: [],
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 500,

				AreaData: [],
				carColumnData: [],
				columnData: [],
				car_type: "",
				total_cart: 0,
				cateList: [],
                slideList:[],
				gyList: [],
				yhList: [],
				orderList: [],
                lineBg:require('@/static/images/index/i1.png'),
                babyTag:"台球宝贝",
                  level:"",  
                  ballId:"",
                  beizhu:"",
                levelList: [{
                		name: '1-3段',
                		id: 1
                	},
                	{
                		name: '3-5段',
                		id: 2
                	},
                	{
                		name: '5-7段',
                		id: 3
                	},
                	{
                		name: '7-9段',
                		id: 4
                	},
                    {
                    	name: '9-11段',
                    	id: 5
                    },
                ],
				area_id:"",
				keyword:"",
				areaList:[],
				areaName:"",
                type:1
			}
		},
		
        onShow() {
            this.getArea()
            this.$api.getSlide().then(res=>{
                console.log(res)
                this.slideList = res.data
            })
            
        },
        onShareAppMessage: function() {
        	let that = this;
        	wx.showShareMenu({
        		withShareTicket: true,
        		menus: ['shareAppMessage', 'shareTimeline']
        	});
        	return {
        		title: '台球',
        		imageUrl: '',
        		path: '/pages/tabbar/index' 
        	};
        },
        onShareTimeline: function() {
        	let that = this;
        	return {
        		title: '',
        		imageUrl: '',
        		
        		
        	};
        },
		methods: {
			confirm(e){
			  
			  this.areaName= e.value[0].name
			  this.area_id= e.value[0].id
			  this.getIndex()
			},
			getArea(){
			    this.$api.getArea().then(res=>{
			        this.areaList =res.data
			        this.areaName= res.data[0].name
			        this.area_id= res.data[0].id
			        this.getIndex()
                    this.getData()
			    })
			},
			openArea(){
			  this.$refs.picker.open()  
			},
            // getArea(){
            //     this.$api.getArea().then(res=>{
            //         console.log(res)
            //         this.getIndex()
            //     })
                
            // },
            async getIndex(){
                    let data = await this.$api.getIndex({area_id:this.area_id})
                    console.log(data)
                    // // this.list = data.list
                    // // this.list[1].name="助理教练"
                    // this.babyTag= data.list[0].name
                    // this.gyList= data.list[0].baby
                    this.orderList =data.yuyue
            },
            async getData(){
                let data = await this.$api.getAssiatant({area_id:this.area_id,type:this.type})
                console.log(data)
                this.gyList=data
            },
            click(e){
                console.log(e)
                this.babyTag= e.name
                this.type=e.value
                 // this.gyList= e.baby
                 this.getData()
            },
			toUserList(){
				uni.navigateTo({
					url:'/pages/artist/index'
				})
			},
			toAct(){
				uni.navigateTo({
					url:'/pages/activity/index'
				})
			},
			toBooking(){
				uni.switchTab({
					url:'/pages/tabbar/chat'
				})
			},
            Apply(data){
            	this.ballId=data.id
            	this.level=''
            	this.beizhu=''
            	this.$refs.popup.open()
            },
			save(){
                        this.$api.ballYingyue({
                        	level:this.level,
                        	beizhu:this.beizhu,
                        	id:this.ballId
                        }).then(res=>{
                        	uni.showToast({
                        		title:'应约成功',
                        		icon:'none'
                        	})
                        	this.$refs.popup.close()
                        })
			},
			async getCate() {
				const {
					data,
					code
				} = await this.$api.CategoryList()
				uni.hideLoading()
				if (code == 200) {
					this.list = data
					// this.categoryId =data[0].id

					// this.getList()
				}
			},
			async getList() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: 1
				})
				console.log(code, data)
				if (code == 200) {
					// this.gyList = data
				}
			},
			async getList1() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: 2
				})
				console.log(code, data)
				if (code == 200) {
					this.yhList = data
				}
			},
			async getList2() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: 3
				})
				console.log(code, data)
				if (code == 200) {
					this.orderList = data
				}
			},

			toArticleMain(i) {
				uni.navigateTo({
					url: '/pages/article/index?id=' + i.id
				})
			},
			toMain(item){
				uni.navigateTo({
					url: '/pages/userMain/index?id=' + item.id
				})
			},
            toArtCate(index){
                uni.navigateTo({
                	url: '/pages/activity/index?index=' + index
                })
            },
            levelConfirm(e) {
            	this.level = e.value[0].name
            },
            showLevelPicker(){
            	this.$refs.levelPicker.open()
            },
            close(){
               this.$refs.popup.close() 
            },
            change(data){
             uni.navigateTo({
             	url: '/pages/addressMain/index?id=' + data
             })
            },
			toUrl(url,type){
                if(!url) return
				if(type){
					uni.switchTab({
						url:url
					})
					return
				}
				uni.navigateTo({
					url:url
				})
			}
		},


	}
</script>
<style scoped lang="scss">
	.content {
		min-height: 100vh;
		position: relative;
		z-index: 9;
	}
    .search{
        background-color: #fff;
        padding-bottom: 20rpx;
    }
	.header {
		
		
		
        
	}

	.formBox {
		position: relative;
		margin: 30rpx 0;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;

	}

	.formBox::before {
		position: absolute;
	}

	.bggray6 {
		border-radius: 5rpx;
		align-items: center;
		flex: 1;
		padding: 14rpx 17rpx 20rpx;
		// background-color: #F4F6F8;
		border-bottom: 1rpx solid #E4E4E4;
		font-size: 30rpx;
		color: #555;

		.send {
			width: 32rpx;
			height: 32rpx;
			padding: 4rpx;
			color: #fff;
			text-align: center;
			line-height: 32rpx;
			background: #277CC0;
			border-radius: 50%;
			font-size: 20rpx;
			margin-right: 11rpx;
		}

		view {
			flex: 1;
		}

		margin-bottom: 14rpx;
	}

	.right {
		margin-left: 17rpx;
	}

	.cartype {
		image {
			width: 34rpx;
			margin-right: 11rpx;
		}

		view {
			flex: 1;
		}

		input {
			flex: 1;
			font-size: 28rpx;
		}
	}

	.submit {
		background: #F24611;
		border-radius: 5rpx;
		color: #fff;

		text-align: center;
		font-size: 25rpx;
		line-height: 60rpx;
		height: 60rpx;
		margin-bottom: 16rpx;
	}

	.chat {
		background-color: #277CC0;
		border-radius: 5rpx;
		line-height: 60rpx;
		height: 60rpx;
		color: #fff;
		display: flex;
		font-size: 25rpx;

		justify-content: center;
		align-items: center;

		image {
			width: 36rpx;
			margin-right: 12rpx;
		}
	}

	.moduleTitle {

		font-weight: 500;
		font-size: 36rpx;
		color: #3D3D3D;
		margin: 30rpx auto;
		text-align: center;
        font-weight: bold;
	position: relative;
		text {
			
			
            position: relative;
            z-index: 99;
		}
	}
        
    .moduleTitle::before{
        position: absolute;
        bottom: 0;
        clear: both;
        content: '';
        z-index: 9;
        width: 135rpx;
        height: 16rpx;
        background: #25CE87;
        border-radius: 8rpx;
        opacity: .7;
    }

    
	.orderItem {
		font-size: 24rpx;
		color: #666;
        position: relative;
		image {
			width: 205rpx;
			height: 205rpx;
            flex-shrink: 0;
			border-radius: 15rpx;
			margin-right: 20rpx;

		}

		.orderright {
			// width: 376rpx;
            flex: 1;
			.orderName {
				font-weight: bold;
				font-size: 26rpx;
				color: #1C1C1C;
			}

			.price {
				color: #2CC6A1;
				font-size: 26rpx;
			}
		}

		.apply {
			width: 132rpx;
			height: 54rpx;
			background: #2CC6A1;
			border-radius: 60rpx;
			line-height: 54rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.noticeSwiper {

		height: 63rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 0rpx 0rpx rgba(9, 2, 4, 0.03);
		border-radius: 12rpx;
		padding: 0 24rpx;
		color: #555555;

		text {
			margin: 0 8rpx;
		}
	}

	.noticeSwiper .swiper-item {
		height: 100%;
	}
    .swiper{
        image{
            height:300rpx;
            width:688rpx;
            border-radius:12rpx;
        }
    }
	.menuBox {
		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 8rpx;
		}

		.menu {
			background-size: 100% 100%;
			background-position: center;
			width: 330rpx;
			height: 150rpx;
			font-weight: 500;
			padding-left: 38rpx;
			font-size: 28rpx;
			margin-top: 32rpx;
		}

		
	}

	.dataitem {
		font-size: 28rpx;
		color: #3D3D3D;
		line-height: 48rpx;
		margin-right: 106rpx;

		image {
			width: 70rpx;
			margin-bottom: 20rpx;

		}
	}
    .gridItem{
        image{
            width: 122rpx;
            height: 122rpx;
            margin-bottom: 29rpx;
        }
        text-align:center;
        font-size: 30rpx;
        color: #222222;
    }
    
</style>
<style scoped lang="scss">
        .title{
            font-weight: bold;
            font-size: 36rpx;
            color: #111111;
        }
        .userName{
                position: absolute;
                background: rgba(255,255,255,0.9);
                border-radius: 18rpx;
                font-weight: bold;
                font-size: 22rpx;
                color: #111111;
                left: 20rpx;
                bottom: 20rpx;
                padding: 4rpx 10rpx;
        }
        .save_btn {
        	width: 100%;
        	height: 90rpx;
        	margin-top: 52rpx;
        	margin-bottom: 40rpx;
        	background: #2CC6A1;
        	border-radius: 8rpx;
        	font-size: 32rpx;
        	color: #FFFFFF;
        	text-align: center;
        	line-height: 90rpx;
        }
</style>